<template>
	<view class="container">
		<image :src="icon" style="width: 100px; height: 100px;" class="img"></image>
		<text>{{username}}</text>
		<view style="width: 100%;">
			<view class="entries">
				<view style="width: 90%; height: 1rpx; background-color: #CCC;margin-bottom: 5px;"></view>
				<view class="entry">
					<image style="width: 30px;height: 30px;" src="../../static/my.png"></image>
					<text>个人信息</text>
					<image src="../../static/more.png" style="width: 40px; height: 40px;"></image>
				</view>
				<view style="width: 90%; height: 1rpx; background-color: #CCC;margin-bottom: 5px;"></view>
				<view class="entry">
					<image style="width: 30px;height: 30px;" src="../../static/UserInfo.png"></image>
					<text>订单列表</text>
					<image src="../../static/more.png" style="width: 40px; height: 40px;"></image>
				</view>
				<view style="width: 90%; height: 1rpx; background-color: #CCC;margin-bottom: 5px;"></view>
				<view class="entry">
					<image style="width: 30px;height: 30px;" src="../../static/modify-password.png"></image>
					<text>修改密码</text>
					<image src="../../static/more.png" style="width:40px; height: 40px;"></image>
				</view>
				<view style="width: 90%; height: 1rpx; background-color: #CCC;margin-bottom: 5px;"></view>
				<view class="entry">
					<image style="width: 30px;height: 30px;" src="../../static/yijianfankui.png"></image>
					<text>意见反馈</text>
					<image src="../../static/more.png" style="width: 40px; height: 40px;"></image>
				</view>
				<view style="width: 90%; height: 1rpx; background-color: #CCC;margin-bottom: 5px;"></view>

			</view>
			<button type="primary" style="margin-top: 20px;">退出</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icon: '/static/head_icon.png',
				username: '文炳麒'
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.entries {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.entry {
		display: flex;
		flex-direction: row;
		height: 50px;
		width: 90%;
		justify-content: space-between;
	}

	.entry>text {
		display: block;
		height: 40px;
		width: 200px;
	}

	button {
		width: 90%;
	}


	.img {
		border-radius: 88rpx;
	}
</style>